<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>蓝领安装工单系统</title> 
    <link href="${pageContext.request.contextPath}/static/css/base.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/login/login.css" rel="stylesheet">
</head> 
<body>
	<div class="login-hd">
		<div class="left-bg"></div>
		<div class="right-bg"></div>
		<div class="hd-inner">
			<span class="logo"></span>
			<span class="split"></span>
			<span class="sys-name">蓝领安装工单系统</span>
		</div>
	</div>
	<div class="login-bd">
		<div class="bd-inner">
			<div class="inner-wrap">
				<div class="lg-zone">
					<div class="lg-box">
						<div class="lg-label"><h4>用户登录</h4></div>
						<div class="alert alert-error" style="display: none;">
			              <i class="iconfont">&#xe62e;</i>
			              <span>请输入用户名</span>
			            </div>
						<form class="form0" action="${pageContext.request.contextPath}/login" method="post">
							<div class="lg-username input-item clearfix">
								<i class="iconfont">&#xe60d;</i>
								<input id="account" type="text" name="username" placeholder="请输入用户名">
							</div>
							<div id="toggle-div" class="lg-password input-item clearfix">
								<i class="iconfont">&#xe634;</i>
								<input type="password" name="password" placeholder="请输入密码">
							</div>
							<div class="tips clearfix">
								<a href="javascript:;" class="register">切换手机验证码登录</a>
							</div>
							<div class="enter">
								<a style="margin-left: 108px;cursor: pointer;" class="supplier">登录</a>
							</div>
						</form>
					</div>
				</div>
				<div class="lg-poster"></div>
			</div>
		</div>
	</div>
	<div class="login-ft">
		<div class="ft-inner">
			<div class="about-us">
				<a href="javascript:;">关于我们</a>
				<a href="javascript:;">法律声明</a>
				<a href="javascript:;">服务条款</a>
				<a href="javascript:;">联系方式</a>
			</div>
			<div class="address">地址：江苏省南京市雨花台区软件园&nbsp;邮编：210019&nbsp;&nbsp;Copyright&nbsp;©&nbsp;2015&nbsp;-&nbsp;2016&nbsp;uimaker-专注于ui设计&nbsp;版权所有</div>
			<div class="other-info">建议使用IE8及以上版本浏览器&nbsp;苏ICP备&nbsp;09003078号&nbsp;E-mail：admin@uimaker.com</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script type="text/javascript">
	var flag = false;
	$(function() {
		$('.supplier').on('click', function() {
			/* var $username = $('[name="username"]');
			if ($.trim($username.val()) == '') {
				$('.alert-error').show();
				$('.alert-error span').text('用户名不能为空');
				return;
			}
			var $password = $('[name="password"]');
			if ($.trim($password.val()) == '') {
				$('.alert-error').show();
				$('.alert-error span').text('密码不能为空');
				return;
			} */
			// 用户名和密码都不是空的
			$('.form0').submit();
		});
		
		
		$('.register').on('click', function() {
			if (flag == true) {
				// 用户名密码登陆
				$('.form0').attr('action', '${pageContext.request.contextPath}/login');
				$('#account').attr('name', 'username');
				$('#account').attr('placeholder', '请输入用户名')
				$(this).text('切换手机验证码登录');
				$('#toggle-div').removeClass('lg-check');
				$('#toggle-div').addClass('lg-password');
				$('#toggle-div').addClass('input-item');
				$('#toggle-div').html('<i class="iconfont">&#xe634;</i><input type="password" name="password" placeholder="请输入密码">');
				
				
				
			} else if (flag == false) {
				// 手机验证码登陆
				$(this).text('切换用户名密码登录');
				$('.form0').attr('action', '${pageContext.request.contextPath}/mobilelogin');
				$('#account').attr('name', 'mobile');
				$('#account').attr('placeholder', '请输入手机号')
				$('#toggle-div').addClass('lg-check');
				$('#toggle-div').removeClass('lg-password');
				$('#toggle-div').removeClass('input-item');
				$('#toggle-div').html('<div class="input-item"><i class="iconfont">&#xe633;</i><input type="text" name="yzm" placeholder="验证码"></div><span class="check-code" style="cursor: pointer;">发送验证码</span>');
			}
			flag = !flag;
		});
		
		<c:if test="${not empty errorMessage}">
			$('.alert-error').show();
			$('.alert-error span').text('${errorMessage}');
		</c:if>
		
		$('.form0').on('click', '.check-code', function() {
			$.getJSON('${pageContext.request.contextPath}/sendloginyzm', {"mobile":$('#account').val()}, function(data) {
				if (data.success) {
					alert('验证码发送成功');
				}
			});
		});;
	});
</script>
</html>


